


<template>
  <dv-border-box-7  :color="['#084FA0','#06073B']" >
    <div class="container">
      <div class="title_container">
        <span  class="title"></span>
        <span style="margin-left: 10px;font-size: 22px">支付方式</span>
      </div>
      <div style="margin-top: 30px">
        <el-row>
          <el-col :span="8">
               <water :msg="text1" :refs="waterChart" :formatter="formatter1" :data="data1" :gradientColor="gradientColor1"></water>
          </el-col>
          <el-col :span="8">
            <water :msg="text2" :refs="waterChart2" :formatter="formatter2" :data="data2" :gradientColor="gradientColor2"></water>
          </el-col>
          <el-col :span="8">
            <water :msg="text3" :refs="waterChart3" :formatter="formatter3" :data="data3" :gradientColor="gradientColor3"></water>
          </el-col>
          <el-col :spam="24">
            <div class="pay" ref="pay" style="width: 100%; height: 120px"></div>
          </el-col>
        </el-row>
      </div>
    </div>
  </dv-border-box-7>
</template>
<script>
import * as echarts from 'echarts'
  import water from './water.vue'
let chart = null
export default {
  components: {
    water
  },
  data() {
    return {
      text1: '会员卡支付（单)',
      formatter1: '74.00%',
      waterChart: 'waterChart',
      data1: [0.74, 0.74],
      colors:[['rgba(21, 25, 82, 1)','rgba(28, 219, 254, 1)'],['rgba(21, 25, 82, 1)','rgba(13, 222, 156, 1)'],['rgba(21, 25, 82, 1)','rgba(228, 196, 49, 1)']],
      gradientColor1: [
        {
          offset: 0,           // 0% 处的颜色
          color: 'rgba(28, 219, 254, 0.5)'  // 起始颜色
        },
        {
          offset: 1,           // 100% 处的颜色
          color: 'rgba(132, 69, 237, 1)'  // 结束颜色
        }
      ],
      text2: "电子支付（单）",
      formatter2: '15.00%',
      waterChart2: 'waterChart2',
      data2: [0.15, 0.15],
      gradientColor2: [
        {
          offset: 0,           // 0% 处的颜色
          color: 'rgba(13, 222, 156, 1)'  // 起始颜色
        },
        {
          offset: 1,           // 100% 处的颜色
          color: 'rgba(14, 139, 255, 1)'  // 结束颜色
        }
      ],
      text3: "现金支付（单）",
      formatter3: '7.00%',
      waterChart3: 'waterChart3',
      data3: [0.05, 0.05],
      gradientColor3: [
        {
          offset: 0,           // 0% 处的颜色
          color: 'rgba(228, 196, 49, 1)'  // 起始颜色
        },
        {
          offset: 1,           // 100% 处的颜色
          color: 'rgba(229, 76, 50, 1)'  // 结束颜色
        }
      ],
    }
  },
  mounted() {
    chart = echarts.init(this.$refs.pay)
    this.getsetOptions()
  },
  methods: {
    getsetOptions() {
     let that=this
      var total = 100;
      var data = [
        {status: '会员卡支付（单)', percent: '74', value: '592001', total: total},
        {status: '电子支付（单）', percent: '15', value: '152023', total: total},
        {status: '现金支付（单）', percent: '7', value: '50201', total: total},

      ]

      function getArrByKey(data, k) {
        let key = k || "value";
        let res = [];
        if (data) {
          data.forEach(function (t) {
            res.push(t[key]);
          });
        }
        console.log(res)
        return res;
      };
      data = data.sort((a, b) => {
        return b.value - a.value
      });
      const option = {
        grid: {
          left: 130,
          right: 10,
          top: 10,
          bottom: 20


        },
        tooltip: {
          show: false,
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: 'rgba(128, 128, 128, 0.0001)',

            }
          },
          formatter: "{b0}: {c0}%"
        },
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        xAxis: {
          show: false
        },
        yAxis: [{
          type: 'category',
          inverse: true,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            margin:110,
            textStyle: {
              align: 'left',
              fontSize: 14,
              fontWeight: 'bold',
              color: 'rgba(79, 166, 247, 1)'
            },
          },
          data: getArrByKey(data, 'status')
        }, {
          type: 'category',
          inverse: true,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitArea: {
            show: false
          },
          splitLine: {
            show: false
          },
          data: getArrByKey(data, 'percent')
        },],
        series: [{
          name: '数据内框',
          type: 'bar',
          itemStyle: {

              barBorderRadius: 10,
              // color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
              //   offset: 0,
              //   color: 'rgba(21, 25, 82,0.3 )'
              // }, {
              //   offset: 0.8,
              //   color: 'rgba(28, 219, 254, 1)'
              // }
              // ], false),
              color:function (parmas){
                 console.log('2222222222parmas',parmas)
                console.log('2222222222parmas',parmas.dataIndex)
                return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                      offset: 0,
                      color: that.colors[parmas.dataIndex][0]
                    }, {
                      offset: 0.8,
                      color: that.colors[parmas.dataIndex][1]
                    }
                    ], false)
              }


          },
          label: {
            normal: {
              show: true,
              position: 'right',
              color: 'white',
              fontSize: 14,
              formatter:
                  function (param, index) {

                    return data[param.dataIndex].value ;
                  },
            }
          },
          barWidth: 20,
          data: getArrByKey(data, 'percent')
        },
          {
            name: '外框',
            type: 'bar',
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: 'rgba(21, 25, 82, 1)',
              }
            },
            barGap: '-100%',
            z: 0,
            barWidth: 20,
            data: getArrByKey(data, 'total')
          }

        ]
      };
      chart.setOption(option)
    },
  }
}
</script>
<style scoped lang="scss">
.dv-border-box-7{
  border-radius: 3px;
  position: relative;
  height: 280px;
  .container{
    padding: 10px;
    .title_container{
      position: absolute;
      color: #1CDBFE;
      left: 20px;
      top:20px;
      display: flex;
      align-items: center;
      .title{
        width: 15px;
        height: 28px;
        background: #1CDBFE;
        border-radius: 9px;
        display: inline-block;
      }
    }

  }
}
:deep(.dv-border-svg-container) {
  display: none;
}

</style>
